<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-05-11 08:47:22
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-03-16 10:48:14
 * @FilePath: /hr_new_vue3/src/views/Management/Human/HumanRoster/FileDetail/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 人员档案详情 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew :title="title" :breadCrumb="breadCrumb" showBack>
      </PageHeaderNew>
    </template>
    <div class="wrap">
      <Header></Header>
      <div class="content">
        <a-tabs lazy-load type="rounded">
          <a-tab-pane key="1" title="基本信息">
            <BaseInfo :list="list"></BaseInfo>
          </a-tab-pane>
          <a-tab-pane key="2" title="岗位信息">
            <PositionInfo :list="list"></PositionInfo>
          </a-tab-pane>
          <a-tab-pane key="3" title="材料附件">
            <MaterialAccessories :list="list"></MaterialAccessories>
          </a-tab-pane>
          <a-tab-pane key="4" title="汇报关系">
            <ReportingRelationship></ReportingRelationship>
          </a-tab-pane>
          <a-tab-pane key="5" title="异动记录">
            <ChangeRecord></ChangeRecord>
          </a-tab-pane>
          <a-tab-pane key="6" title="考勤概况">
            <Attendance></Attendance>
          </a-tab-pane>
          <a-tab-pane key="7" title="操作记录">
            <OperationRecord></OperationRecord>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </ContentCard>
</template>

<script lang="ts" setup>
import Header from './Components/Header/index.vue';
import BaseInfo from './Components/Container/BaseInfo/index.vue';
import ReportingRelationship from './Components/Container/ReportingRelationship/index.vue';
import ChangeRecord from './Components/Container/ChangeRecord/index.vue';
import Attendance from './Components/Container/Attendance/index.vue';
import OperationRecord from './Components/Container/OperationRecord/index.vue';
import PositionInfo from './Components/Container/PositionInfo/index.vue';
import MaterialAccessories from './Components/Container/MaterialAccessories/index.vue';
import useControlValuesStore from '@/store/controlValues';
import { GetHumanRosterDetail } from '@/apis/management/human/humanRoster';

const controlValues = useControlValuesStore();
const title = '人员档案详情';

const breadCrumb: string[] = ['人事', '员工花名册', '人员档案详情'];

const route = useRoute();

let id = Number(route.query.id);

onBeforeRouteUpdate((to) => {
  id = Number(to.query.id);
  getData();
});
const list = ref();

const getData = async () => {
  try {
    list.value = await GetHumanRosterDetail({ id });
    console.log('人员信息模板', list.value.ctlValue);
    controlValues.ctlValuesSetting(list.value.ctlValue);
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();
</script>

<style lang="less" scoped>
:deep(.arco-tabs-nav-tab-list) {
  left: 50%;
  transform: translateX(-50%) !important;
}
:deep(.arco-scrollbar.arco-scrollbar-type-track .arco-scrollbar-track) {
  background-color: #fff;
}
</style>
